<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/_reset.css" />
    <link rel="stylesheet" href="./css/detailed.css" />
  </head>
  <body>
    <!-- 整个大盒子 -->
    <div class="all">
      <!-- 顶部 -->
      <div class="top">
        <div class="back">Back</div>
        <p>产品详细</p>
        <div><img src="./发现页和详细页/形状9.png" alt="" /></div>
      </div>
      <!-- 顶部下面的图片 -->
      <div class="picture">
        <img src="./发现页和详细页/111.png  " alt="" />
      </div>
      <!-- 价格 -->
      <div class="price">
        <div class="yuan">
          <img src="./发现页和详细页/￥32.png" alt="" />
        </div>
        <!-- 购买 -->
        <div class="buy">购买</div>
      </div>
      <!-- 好评 -->
      <div class="appraise">
        <!-- 星星 -->
        <div class="stars">
          <div class="review">
            <img src="./发现页和详细页/形状16.png" alt="" />
            <p>好评度<span>99%</span></p>
          </div>
        </div>
        <p>共605个评价></p>
      </div>
      <!-- 适用商户 -->
      <div class="suit">
        <p>适用商户</p>
        <p>></p>
      </div>
      <!-- 店铺 -->
      <div class="content">
        <div class="content_top">
          <!-- 店铺图片 -->
          <div class="content_top-left">
            <img src="./发现页和详细页/444.png" alt="" />
            <!-- 图片上的横条 -->
            <div class="item">正佳店</div>
          </div>
          <!-- 店铺信息 -->
          <div class="content_top-center">
            <p>万岁寿司(正佳店)</p>
            <!-- 几颗星星 -->
            <div class="stars">
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <span>10分</span>
              <p>离你100m</p>
              <span>查看详情 >></span>
            </div>
          </div>
          <!-- 点击进入 -->
          <div class="buy">进入</div>
        </div>
        <!-- 店铺 -->
        <div class="content_top">
          <div class="content_top-left">
            <img src="./发现页和详细页/333.png" alt="" />
            <div class="item">体育西店</div>
          </div>
          <div class="content_top-center">
            <p>万岁寿司(体育西店)</p>
            <div class="stars">
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <span>10分</span>
              <p>离你100m</p>
              <span>查看详情 >></span>
            </div>
          </div>
          <!-- 点击进入 -->
          <div class="buy">进入</div>
        </div>
        <!-- 店铺 -->
        <div class="content_top">
          <div class="content_top-left">
            <img src="./发现页和详细页/222.png" alt="" />
            <div class="item">昌岗店</div>
          </div>
          <div class="content_top-center">
            <p>万岁寿司(昌岗店)</p>
            <div class="stars">
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <img src="./发现页和详细页/形状16.png" alt="" />
              <span>10分</span>
              <p>离你100m</p>
              <span>查看详情 >></span>
            </div>
          </div>
          <!-- 点击进入 -->
          <div class="buy">进入</div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <div class="bottom_img">
          <div>
            <img src="./发现页和详细页/首页.png" alt="" />
            <p>首页</p>
          </div>
          <div>
            <img src="./发现页和详细页/分类4.png" alt="" />
            <p>分类</p>
          </div>
          <div>
            <img src="./发现页和详细页/形状7副本.png" alt="" />
            <p>发现</p>
          </div>
          <div>
            <img src="./发现页和详细页/我的.png" alt="" />
            <p>我的</p>
          </div>
        </div>
      </div>
      <!-- 空的div -->
      <div class="empty"></div>
    </div>
  </body>
</html>
